<template>
    <van-pull-refresh v-model="isLoading" @refresh="onRefresh">
        <div class="detail">
            <van-skeleton title :row="3" :loading="loading">
                <div class="banner">
                    <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
                        <van-swipe-item v-for="(image, index) in banner" :key="index">
                            <img :src="image.url" alt="">
                        </van-swipe-item> 
                    </van-swipe>
                </div>
                <div class="content">
                    <div class="goods_header">
                        <div class="goods_title">{{goods.title}}</div>
                        <div class="goods_price" v-if="Array.isArray(curr_sku.price)">
                            <div class="goods_price_item" v-for="(item,index) in curr_sku.price" :key="index">
                                <div v-if="index === curr_sku.price.length-1">
                                    <h3>{{item.price}}元</h3>
                                    <p>>={{item.num}}箱</p>
                                </div>
                                <div v-else-if="index ===0">
                                    <h3>{{item.price}}元</h3>
                                    <p>{{">="+item.num}}箱</p>
                                </div>
                                <div v-else>
                                    <h3>{{item.price}}元</h3>
                                    <p>>={{item.num}}箱</p>
                                </div>
                            </div>
                        </div>
                        <div class="goods_price" v-else><span>{{curr_sku.price}}元</span></div>
                        <div class="tags"><van-tag type="danger">正品保证</van-tag></div>
                        <div class="goods_item">库存：{{curr_sku.stock}}</div>
                        <div class="goods_item">已选：{{curr_sku.name}}*{{curr_sku.count}}</div>
                    </div>
                    <div class="goods_body">
                        <div class="title">规格</div>
                        <div class="btm">
                            <div class="item" :class="{current:item.id === skuId}" v-for="(item,index) in sku.sku_list" :key='index' @click="pickSku(index)">
                                <div class="img">
                                    <img :src="item.url" alt="" srcset="">
                                </div>
                                <div class="name">{{item.name}}</div>
                            </div>
                        </div>
                        <div class="goods_num">
                            <div class="title">选择数量</div>
                            <div class="stepper" v-if="Array.isArray(curr_sku.price)">
                                <van-stepper v-model="curr_sku.count" :min="curr_sku.price[0].num" :max="Number(curr_sku.stock)" />
                            </div>
                            <div class="stepper" v-else>
                                <van-stepper v-model="curr_sku.count" :min="1" :max="Number(curr_sku.stock)" />
                            </div>
                        </div>
                    </div>
                    <div class="cont">
                        <div class="title">详情</div>
                        <div class="cont_detial" v-html="goods.details"></div>
                    </div>
                </div>
                <div class="btm">
                    <van-goods-action>
                        <van-goods-action-icon @click="goShopCart" icon="cart-o" text="购物车" />
                        <van-goods-action-button :loading='btn_loading' @click="shopcartAdd" type="warning" text="加入购物车" />
                        <van-goods-action-button :loading='btn_loading' @click="buy" type="danger" text="立即购买" />
                    </van-goods-action>
                </div>
            </van-skeleton>
        </div> 
    </van-pull-refresh>
        
    
</template>
<script>
import { mapState } from "vuex";
export default {
    data(){
        return{
            isLoading: false,//是否开启下拉刷新
            loading:false,//骨架屏
            btn_loading:false,//按钮loading
            banner:{},//产品图
            goods:{},
            sku:{},
            curr_sku:{},//当前选中商品规格
            skuId:null,//当前选中规格商品id
        }
    },
    mounted(){
        console.log(this.$route.params.id)
        this.getGoodsDetail()
    },
    computed:{
        ...mapState(["openid"]),
    },
    methods:{
        //点击购物车
        goShopCart(){
            this.$router.push('/shopcart')
        },
        //下拉刷新
        onRefresh() {
            this.getGoodsDetail()
            this.isLoading = false
        },
        //立即购买
        buy() {
            console.log('立即购买')
            let nowPrice = this.curr_sku.price
            if (this.curr_sku.price instanceof Array) {
                nowPrice = this.curr_sku.price[0].price
                this.curr_sku.price.forEach(item=>{
                    if (this.curr_sku.count>=Number(item.num)) {
                        nowPrice = item.price
                    }
                })
            }
            let data = {
				title: this.sku.good.title,
				goods_id: this.sku.good.id,
				guageId: this.curr_sku.id,
				guageName: this.curr_sku.name,
				price: nowPrice,
				num: this.curr_sku.count,
                url: this.curr_sku.url,
                freight:this.sku.good.freight
                
            }
            console.log(data)
			this.$store.commit('payGoods', data)
			this.$router.push('/orderconfirmNow')
        },
        //加入购物车
        async shopcartAdd() {
            console.log('加入购物车')
            let form = {
                goods_id: this.sku.good.id,
				num: this.curr_sku.count,
				hao_id: this.curr_sku.id,
                openid: this.openid,
                price:Array.isArray(this.curr_sku.price)?Number(this.curr_sku.price[this.curr_sku.price.length-1].price):this.curr_sku.price
            }
            this.btn_loading = true
            let{data:{code,data}} = await this.$http.post(this.$api.cartIncrease,form)
            this.btn_loading = false
            if (code === 0) {
                this.$toast.success(data);
                this.curr_sku.count = 1
            }
        },
        //选择规格
        pickSku(e){
            console.log('选择规格>>>>>>>>>>>>>',e)
            this.curr_sku = this.sku.sku_list[e]
            this.curr_sku.count = 1
            this.skuId = this.curr_sku.id

        },
        //获取商品详细
        async getGoodsDetail(){
            let form = {
                id:this.$route.params.id,
                openid:this.openid
            }
            this.loading = true
            let {data:{code,data},} = await this.$http.get(this.$api.goodsList,form)
            this.loading = false
            if (code === 0) {
                let sku_list = data.gui.map((item) => {
                    if (item[0].m_price) {
                        if (JSON.parse(item[0].m_price) instanceof Array) {
                            item[0].count =JSON.parse(item[0].m_price)[0].num;
                        }else{
                            item[0].count = 1
                        }
                    }else{
                        item[0].count = 1
                    }
                    item[0].price = item[0].price || JSON.parse(item[0].m_price);
                    return item[0];
                });
                this.banner = data.data.map((item) => {
                    return item[0]
                })
                this.goods = data.items[0]
                console.log('banner>>>>>>>>>>>>>',this.banner)
                let good = data.items[0]
                this.sku = {
                    ...{logo:data.log[0].url},
                    sku_list,
                    good
                }
                this.curr_sku = this.sku.sku_list[0]
                this.skuId = this.curr_sku.id
                console.log('this.sku>>>>>>>>>>>>>>>>',this.sku)
                console.log('this.curr_sku>>>>>>>>>>>>>>>>',this.curr_sku)
            }
        }
    }
}
</script>
<style lang="scss" scoped>
    .detail{
        min-height: 100vh;
        .van-skeleton__content{
            margin-top: 2rem;
        }
        .van-skeleton__row, .van-skeleton__title{
            background-color: #fff;
        }
        .banner{
            img{
                width: 100%;
            }
        }
        .content{
            padding-bottom: 50px;
            .goods_header{
                padding: 1rem;
                background-color: #fff;
                .goods_title{
                    font-size: 16px;
                }
                .goods_price{
                    display: flex;
                    padding: 1rem 0;
                    span{
                        font-size: 16px;
                        color: red;
                    }
                    .goods_price_item{
                        margin-right: 1+rem;
                        text-align: center;
                        h3{
                            font-size: 16px;
                            color: red;
                        }
                        p{
                            font-size: 12px;
                        }
                    }
                }
                .goods_item{
                    font-size: 12px;
                    color: #999;
                    padding: 0.5rem 0;
                }
            }
            .goods_body{
                margin-top: 1rem;
                padding: 1rem;
                background-color: #fff;
                .btm{
                    display: flex;
                    flex-wrap: wrap;
                    padding: 1rem 0;
                    .item{
                        
                        margin-right: 0.5rem;
                        margin-bottom: 0.5rem;
                        background-color: #f0f0f0;
                        font-size: 14px;
                        display: flex;
                        align-items: center;
                        .img{
                            padding: 0.2rem;
                            width: 2rem;
                            height: 2rem;
                            img{
                                width: 100%;
                                height: 100%;
                            }
                        }
                        .name{
                            padding: 0.5rem 0.5rem;
                        }
                    }
                    .current{
                        color: #fff;
                        background-color: red;
                    }
                }
                .goods_num{
                    text-align: right;
                    .title{
                        border-top: 1px solid #f0f0f0;
                        line-height: 3rem;
                        text-align: left;
                    }
                }
            }
            .cont{
                margin-top: 1rem;
                background-color: #fff;
                padding:1rem;
                .title{
                    line-height: 3rem;
                    border-bottom: 1px solid #f0f0f0;
                }
                .cont_detial{
                    padding: 1rem 0;
                    ::v-deep img{
                        width: 100%!important;
                        height: auto;
                    }
                }
                
            }
        }
    }
</style>